<template>
    <div id="ApprovalTest">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="待审批申请单" name="tab1">
                <el-table :data="pendingList" style="width: 100%">
                    <el-table-column prop="processId" label="流程ID" width="300">
                    </el-table-column>
                    <el-table-column prop="approver" label="审批节点" width="300">
                        <template slot-scope="scope">
                            {{scope.row.approver }}审批
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="是否审批" width="300">
                        <template slot-scope="scope">
                            <el-button type="info" size="mini" v-if="scope.row.status === 0" plain>未审核</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createDate" label="创建时间" width="300">
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" @click.native="updApproval(scope.row)" circle></el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 30px;margin-left: 1150px;" v-if="pageCount>=1">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-arrow-left" @click="prevPage">上一页</el-button>
                        <el-button><span>{{pageNum}} / {{pageCount}}</span></el-button>
                        <el-button type="primary" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </el-button-group>
                </div>
                <el-row v-if="approval">
            <el-dialog title="审批" :visible.sync="approval" width="60%">
                <el-form :model="sysLeaveApplication" label-width="100px" class="demo-ruleForm" style="height: 400px;">
                    <div style="display: flex; gap: 60px;margin-left: 100px;height: 80px;">
                        <div style="flex: 1;">
                            班级 <el-input placeholder="请输入内容" v-model="sysLeaveApplication.name" style="width: 230px;" :disabled="true"></el-input>
                        </div>
                        <div style="flex: 1;">
                            学生 <el-input placeholder="请输入内容" v-model="sysLeaveApplication.studentName" style="width: 230px;" :disabled="true"></el-input>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;margin-left: 30px;height: 80px;">
                        <div style="flex: 1;">
                            请假开始时间 
                            <el-date-picker v-model="sysLeaveApplication.startTime" type="date" :disabled="true"
                               placeholder="选择开始日期时间">
                            </el-date-picker>
                        </div>
                        <div style="flex: 1;">

                            请假结束时间 
                            <el-date-picker v-model="sysLeaveApplication.endTime" type="date"  :disabled="true"
                               placeholder="选择结束日期时间">
                            </el-date-picker>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;height: 80px;margin-left: 50px;">
                        <div style="flex: 1;">
                            请假总天数 <el-input v-model="sysLeaveApplication.totalDay" style="width: 230px;" :disabled="true">
                                     </el-input>
                        </div>
                        <div style="flex: 1;">
                            请假类型 <el-select v-model="sysLeaveApplication.leaveTypeName" :disabled="true">
                                        
                                    </el-select>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;height: 80px;">
                        <div style="flex: 1;">
                            请假原因
                            <el-input type="textarea" v-model="sysLeaveApplication.reason" :disabled="true" :autosize="{ minRows: 4, maxRows: 4}" :style="{ width: '800px', resize: 'vertical' }"></el-input>
                        </div>
                        
                    </div>
                    <div style="display: flex;gap: 10px;position: absolute;right: 170px;bottom: 0;height: 50px;">
                        <span slot="footer" class="dialog-footer">
                            <el-button @click.native="reject(sysLeaveApplication)">通过</el-button>
                            <el-button @click.native="approve(sysLeaveApplication)">驳回</el-button>
                            <el-button @click="approval = false">取 消</el-button>
                        </span> 
                    </div>
                </el-form>
            </el-dialog>
        </el-row>
            </el-tab-pane>
            <el-tab-pane label="已审批申请单" name="tab2">
                <el-table :data="processedList" style="width: 100%">
                    <el-table-column prop="processId" label="流程ID" width="300">
                    </el-table-column>
                    <el-table-column prop="approver" label="审批节点" width="300">
                        <template slot-scope="scope">
                            {{scope.row.approver }}审批
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="是否审批" width="300">
                        <template slot-scope="scope">
                            <el-button type="info" size="mini" v-if="scope.row.status === 2" plain>已审核</el-button>
                            <el-button type="info" size="mini" v-if="scope.row.status === 3" plain>已审核</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createDate" label="创建时间" width="300">
                    </el-table-column>
                    <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-view" @click.native="upd(scope.row)" circle></el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <div style="margin-top: 30px;margin-left: 1150px;" v-if="proPageCount>=1">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-arrow-left" @click="proPrevPage">上一页</el-button>
                        <el-button><span>{{proPageNum}} / {{proPageCount}}</span></el-button>
                        <el-button type="primary" @click="proNextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </el-button-group>
                </div>
                <el-row v-if="processed">
            <el-dialog title="流程审批" :visible.sync="processed" width="60%">
                <el-form :model="sysLeaveApplication" label-width="100px" class="demo-ruleForm" style="height: 400px;">
                    <div style="display: flex; gap: 60px;margin-left: 100px;height: 80px;">
                        <div style="flex: 1;">
                            班级 <el-input placeholder="请输入内容" v-model="sysLeaveApplication.name" style="width: 230px;" :disabled="true"></el-input>
                        </div>
                        <div style="flex: 1;">
                            学生 <el-input placeholder="请输入内容" v-model="sysLeaveApplication.studentName" style="width: 230px;" :disabled="true"></el-input>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;margin-left: 30px;height: 80px;">
                        <div style="flex: 1;">
                            请假开始时间 
                            <el-date-picker v-model="sysLeaveApplication.startTime" type="date" :disabled="true"
                               placeholder="选择开始日期时间">
                            </el-date-picker>
                        </div>
                        <div style="flex: 1;">

                            请假结束时间 
                            <el-date-picker v-model="sysLeaveApplication.endTime" type="date"  :disabled="true"
                               placeholder="选择结束日期时间">
                            </el-date-picker>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;height: 80px;margin-left: 50px;">
                        <div style="flex: 1;">
                            请假总天数 <el-input v-model="sysLeaveApplication.totalDay" style="width: 230px;" :disabled="true">
                                     </el-input>
                        </div>
                        <div style="flex: 1;">
                            请假类型 <el-select v-model="sysLeaveApplication.leaveTypeName" :disabled="true">
                                        
                                    </el-select>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;height: 80px;">
                        <div style="flex: 1;">
                            请假原因
                            <el-input type="textarea" v-model="sysLeaveApplication.reason" :disabled="true" :autosize="{ minRows: 4, maxRows: 4}" :style="{ width: '800px', resize: 'vertical' }"></el-input>
                        </div>
                        
                    </div>
                    <div style="display: flex;gap: 10px;position: absolute;right: 170px;bottom: 0;height: 50px;">
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="processed = false">取 消</el-button>
                        </span> 
                    </div>
                </el-form>
            </el-dialog>
        </el-row>
        </el-tabs>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    name: "ApprovalTest",
    data () {
        return {
            activeName: 'tab1',
            pageNum: 1,
            pageSize: 5,
            pageCount: 0,
            proPageCount:0,
            proPageNum: 1,
            pendingList:[],
            processedList:[],
            approval:false,
            sysLeaveApplication:{},
            processed:false,
        }
    },
    created () {
        this.getPendingList(1);
    },
    methods: {
        handleTabClick (tab) {
            if(tab.name == 'tab1'){
                this.pageCount = '';
                this.proPageCount = '';
                this.getPendingList(1);
                console.log(tab);
            }else if(tab.name == 'tab2'){
                console.log(tab);
                this.proPageCount = '';
                this.pageCount = '';
                this.getProcessedList(1);
            }
        },
        prevPage(){
            this.pageNum--;
            var pageNum = this.pageNum;
            if(this.pageNum >= 1){
                this.getPendingList(pageNum);
            }else{
                this.getPendingList(1);
            }   
        },
        nextPage(){
            this.pageNum++;
            var pageNum = this.pageNum;
            if(this.pageNum <= this.pageCount){
                this.getPendingList(pageNum);
            }else{
                this.getPendingList(this.pageCount);
            }                
        },
        getPendingList(pageNum){
            this.pageNum = pageNum;
            this.Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/leaveApplication/getPendingList',
                method: 'post',
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                },
                headers: {
                    'Authorization': this.Authorization
                }
            })
            .then(response => {
                console.log(response);
                this.pendingList = response.data.data.pendingList;
                this.pageCount = response.data.data.pageCount;
            })
        },
        updApproval(row){
            this.approval = true;
            this.sysLeaveApplication = row;
            
        },
        approve(sysLeaveApplication){
            this.sysLeaveApplication = sysLeaveApplication;
            console.log(sysLeaveApplication);   
            this.Authorization = localStorage.getItem("Authorization");
            axios.post('http://localhost:9002/sys/leaveApplication/reject',
                this.sysLeaveApplication,{
                headers: {
                    'Authorization': this.Authorization
                }
            })
            .then(response => {
                    console.log(response);
               if(response.data.status == 200){
                    this.$message.success(response.data.msg);
                    this.getPendingList(1);
                    this.approval = false;
               }else{
                    this.$message.error(response.data.msg);
               }
            })
        },
        reject(sysLeaveApplication){
            this.sysLeaveApplication = sysLeaveApplication;
            this.Authorization = localStorage.getItem("Authorization");
            axios.post('http://localhost:9002/sys/leaveApplication/approve',
                this.sysLeaveApplication,{
                headers: {
                    'Authorization': this.Authorization
                }
            })
            .then(response => {
                console.log(response);
                if(response.data.status == 200){
                    this.$message.success(response.data.msg);
                    this.getPendingList(1);
                    this.approval = false;
                }else{
                    this.$message.error(response.data.msg);
                }
            })
        },
        getProcessedList(proPageNum){
            this.proPageNum = proPageNum;
            this.Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/leaveApplication/getProcessedList',
                method: 'post',
                params: {
                    pageNum: this.proPageNum,
                    pageSize: this.pageSize
                },
                headers: {
                    'Authorization': this.Authorization
                }
            })
            .then(response => {
                console.log(response);
                this.processedList = response.data.data.processedList;
                this.proPageCount = response.data.data.pageCount;
            })
        },
        proPrevPage(){
            if(this.proPageNum-1 >= 1){
                this.getProcessedList(this.proPageNum-1);
            }else{
                this.getProcessedList(1);
            }   
        },
        proNextPage(){
            console.log("总页数"+this.proPageCount);
            if(this.proPageNum+1 <= this.proPageCount){
                this.getProcessedList(this.proPageNum+1);
            }else{
                this.getProcessedList(this.proPageCount);
            }                
        },
        upd(row){
            this.sysLeaveApplication = row;
            this.processed = true;
        }
    }
}
</script>